<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6_固定定位广告条</title>
    <style>
        .top {
            height: 120px;
            background-color: #5AA4AE;
            color:#fff;
            font-size:30px;
            position: fixed;
            top:0;
            /*视口 ViewPort*/
            width: 100vw;/*100%的视口宽度*/
        }
        .left,.right {
            width:60px;
            height: 200px;
            position: fixed;
            top:300px;



        }
        .left{
            background-color: #FFF799;
            left:20px;
        }
        .right{
            background-color: #f35336;
            right:20px;
        }
        .main {
            margin-top:130px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur consequatur cupiditate deserunt
        distinctio dolor doloremque, eaque enim explicabo fugiat, iure libero, officiis quidem quo repudiandae
        temporibus tenetur vel? Tempore, temporibus!
    </div>
    <div>Aliquam aspernatur dolor dolore est harum labore modi nam nesciunt quia repudiandae, voluptate voluptates? Ea
        eos odit soluta ullam veritatis. Aliquid deleniti dolorum explicabo fugiat laborum mollitia nisi odio ut.
    </div>
    <div>Accusamus adipisci, aperiam commodi debitis distinctio doloribus eligendi et excepturi explicabo fuga illum
        inventore maiores maxime nihil, nostrum officia quae quaerat quidem quos recusandae soluta voluptatem
        voluptatibus. Cumque cupiditate, harum.
    </div>
    <div>Aliquid amet cumque, ea eveniet excepturi facere inventore ipsa iusto laboriosam, modi molestiae nesciunt
        numquam provident quam quasi reiciendis sapiente tempore tenetur unde voluptate. Eligendi nihil omnis quam sint
        temporibus.
    </div>
    <div>Distinctio eveniet facilis id minus molestias perferendis quaerat quam quasi reiciendis voluptate? Adipisci,
        aliquam architecto asperiores atque deserunt distinctio dolore dolorum impedit provident quisquam quos ratione
        rem sequi velit veritatis!
    </div>
    <div>Cum, hic illo. Alias at consequatur ea est expedita fuga inventore ipsa, labore laboriosam laborum laudantium
        magni, molestias nemo nesciunt, pariatur porro provident quam quasi quibusdam quis reiciendis tenetur
        voluptates!
    </div>
    <div>Accusantium aliquid, culpa deserunt distinctio expedita fugiat hic iure iusto laboriosam nihil nisi, provident
        rem sit. Accusantium cumque debitis excepturi iure laboriosam libero provident quam repudiandae rerum
        voluptatem. Dolor, molestias!
    </div>
    <div>Ab accusantium aliquid animi architecto aspernatur commodi cum delectus eligendi enim esse et, id inventore
        iure molestias necessitatibus nihil nisi obcaecati ratione sed sunt tenetur ullam veritatis vero! Possimus,
        repellat?
    </div>
    <div>Cum cupiditate, dicta ex fugiat minus natus, quisquam ratione repellat, sequi tenetur vitae voluptas! Amet
        aperiam aspernatur, blanditiis commodi cupiditate dolorum iusto laborum maiores nostrum quae repellendus sed
        vero voluptatibus.
    </div>
    <div>Amet cumque deserunt esse est et excepturi explicabo, fuga iure minus, modi officiis voluptas voluptates.
        Consequatur eaque, eos inventore ipsam labore laudantium maiores minima omnis placeat sit soluta, unde! Quos.
    </div>
    <div>Ducimus iste pariatur placeat quis repellendus. Commodi, consectetur dignissimos distinctio eligendi iste
        mollitia nobis nostrum numquam porro possimus, quo ratione repellat repellendus totam veniam. Distinctio harum
        minima porro quo repudiandae!
    </div>
    <div>Amet commodi, enim excepturi fugit harum illo quisquam rem tenetur? A amet dolorem doloremque dolorum, ex fuga
        fugiat in labore laudantium magni nisi obcaecati pariatur quibusdam quod quos, suscipit ut?
    </div>
    <div>Accusantium consequatur deserunt eaque recusandae ut. Dolores neque porro reiciendis voluptatibus. Corporis
        culpa cupiditate dolorum iure quaerat tenetur veritatis. Ab corporis delectus dolorum ea expedita fugit neque
        rem saepe velit.
    </div>
    <div>Amet asperiores at consectetur consequuntur id inventore nesciunt quos rerum saepe velit? Illum iusto libero
        maxime odio, porro provident qui quis, recusandae rem soluta ullam unde voluptas. Consequatur, nesciunt, quia!
    </div>
    <div>Accusantium, aliquam velit. A accusantium aperiam at esse eveniet illum laboriosam molestiae nam,
        necessitatibus nemo non nostrum nulla omnis porro provident quas quasi repudiandae saepe unde voluptas voluptate
        voluptates voluptatum.
    </div>
    <div>At consectetur dolor eligendi explicabo inventore labore maxime molestias natus neque porro repellat
        repudiandae ullam veniam veritatis, voluptas! Facere in nulla officia reprehenderit sit. Debitis fugiat illo
        quibusdam tempore. Aspernatur?
    </div>
    <div>Animi aperiam architecto at dolor dolore ducimus eius facere illo labore molestiae molestias mollitia,
        praesentium quibusdam quis repellendus sed suscipit unde! Accusamus accusantium beatae, minus quibusdam
        recusandae reprehenderit soluta veniam.
    </div>
    <div>Adipisci illo nam provident. Aut, consectetur ducimus error incidunt inventore iusto magnam maiores molestiae
        necessitatibus neque quae qui, quia ratione sequi temporibus. Earum fugiat incidunt molestiae numquam, rem sit
        vero?
    </div>
    <div>Aliquam deserunt eaque eligendi magnam magni molestiae molestias officiis, quam quasi. Aperiam consequatur
        culpa hic nesciunt nulla officia quos sequi velit vero? Ad asperiores culpa exercitationem nulla pariatur quidem
        temporibus.
    </div>
    <div>Assumenda deserunt distinctio dolores earum enim eos, esse explicabo, fugiat ipsa ipsam magni minima nobis,
        numquam placeat quo similique tempora voluptate! Iusto laudantium natus, numquam quis reiciendis repellat rerum
        ullam.
    </div>
    <div>Ducimus earum ipsam quas quis voluptas! Adipisci aperiam assumenda cupiditate dolore, eos ipsam, iste odio
        omnis perspiciatis praesentium quaerat, repellendus sit totam? Architecto esse labore natus nihil nulla quaerat
        repellat?
    </div>
    <div>Architecto, incidunt odio. Beatae cum deleniti dolores eveniet tempore! A aperiam aspernatur, commodi culpa
        debitis earum eius eum impedit in libero molestiae nostrum nulla numquam qui quis quisquam sed tempore!
    </div>
    <div>Autem, corporis cumque illo ipsam iusto temporibus tenetur velit voluptate. Ipsa labore nam nostrum quae
        tenetur. Culpa cumque eveniet exercitationem mollitia neque placeat provident tempora! Ex ipsa libero nesciunt
        non.
    </div>
    <div>Ab aliquid consequatur dicta dolore ea eum explicabo harum inventore ipsum iusto labore laudantium molestias
        necessitatibus, nemo nesciunt obcaecati optio praesentium provident quae ratione rerum saepe sint, veritatis
        voluptate, voluptatibus.
    </div>
    <div>Accusamus asperiores assumenda consequuntur exercitationem iure qui quibusdam, sint. Aperiam cum cupiditate
        ipsum non reiciendis! Accusamus aut blanditiis deleniti dolore, doloremque fugit iste minima molestias qui
        sapiente sed veritatis voluptates.
    </div>
    <div>Esse fuga in inventore non quo tenetur veniam? A animi delectus dolor eos eveniet exercitationem fuga fugit
        impedit laudantium maxime modi nam necessitatibus qui quos sint, sit voluptates. Possimus, repellendus?
    </div>
    <div>Accusamus aliquam aperiam aut commodi corporis delectus deleniti dolore dolores doloribus eligendi eos est eum
        excepturi explicabo hic incidunt laudantium maiores obcaecati quasi, soluta veritatis vero vitae voluptate
        voluptates voluptatum.
    </div>
    <div>Ad architecto assumenda, corporis dicta doloremque eius illo nisi odit officia quaerat quia quidem recusandae
        saepe sunt tenetur! Aut exercitationem fugiat nisi, perferendis sequi ut voluptatum! Eveniet molestiae nostrum
        quis.
    </div>
    <div>Aliquam asperiores assumenda atque autem corporis dolores ducimus ea eius, eos esse et eum fugiat harum itaque
        libero magni maxime nobis obcaecati, odio omnis possimus quaerat repellendus reprehenderit rerum voluptate!
    </div>
    <div>A autem dicta dignissimos dolores laudantium maiores, mollitia natus praesentium quaerat qui ratione totam
        voluptatibus! Dicta facere maiores minus modi praesentium quibusdam quisquam, quo repudiandae sit soluta tempore
        tenetur veniam.
    </div>
    <div>Cum, dicta excepturi ipsam maxime porro quam repellat voluptate! Ab accusantium asperiores assumenda beatae
        blanditiis distinctio dolor dolorem in, inventore iure magni minima minus, natus nobis repellat sint unde,
        veniam.
    </div>
    <div>Ad asperiores autem deleniti, eligendi hic ipsum iste itaque minima molestiae neque odio perferendis quidem?
        Aliquid at deleniti est explicabo illo iusto, natus nostrum quas quis rem sunt suscipit voluptas.
    </div>
    <div>Ab animi aperiam, blanditiis, ea eius enim est eveniet exercitationem fugiat illo laborum minus molestiae
        nostrum nulla numquam optio pariatur perferendis quam quia quis quod ut vel velit voluptate voluptatibus?
    </div>
    <div>Accusamus ad cum distinctio iusto natus officiis possimus recusandae rerum saepe totam. Adipisci corporis,
        dicta, dolor esse eum explicabo, harum inventore ipsum non nulla praesentium quidem repudiandae sint sit sunt!
    </div>
    <div>A alias amet animi blanditiis consectetur consequuntur delectus dicta eum ipsa ipsam iste maxime molestias
        mollitia natus nemo, officiis omnis provident quasi quo reprehenderit sint sit, sunt suscipit, tempora
        voluptates!
    </div>
    <div>Accusamus aliquam aperiam architecto culpa deleniti et eveniet, fuga iure odit quibusdam sed totam voluptate!
        Aspernatur laboriosam natus nobis quaerat soluta vel. Culpa doloribus facilis laudantium mollitia nihil nisi,
        quae?
    </div>
    <div>Blanditiis cumque debitis dolores harum itaque magnam necessitatibus obcaecati perspiciatis, quo unde!
        Accusantium aut dicta eligendi esse fuga labore perspiciatis quas quisquam quo reprehenderit velit, vero.
        Dolorum, inventore tenetur. Mollitia?
    </div>
    <div>Accusantium aliquam animi dolorum ipsum iusto nam nobis numquam officiis ut. A blanditiis consectetur
        distinctio dolore eius explicabo impedit ipsum iusto nemo neque nostrum provident, quidem recusandae rem saepe
        voluptas.
    </div>
    <div>A beatae cum doloremque, error excepturi iure quaerat tempora ut. Accusamus amet ducimus eius ipsa iure maxime,
        nemo nobis nulla odio, omnis pariatur praesentium provident saepe sed tenetur vero, voluptatibus?
    </div>
    <div>At consequatur corporis culpa delectus dignissimos doloremque, ea, earum enim facere facilis incidunt maiores
        natus necessitatibus, nemo nihil odit quasi quisquam recusandae soluta velit. Dolorum exercitationem illo
        nostrum sint voluptates.
    </div>
    <div>Aliquam autem cumque eaque illo minus odit, recusandae. Alias commodi explicabo, fugit labore laudantium
        maiores non voluptatibus. Alias cum distinctio enim ipsa libero placeat praesentium repudiandae, sint vitae
        voluptas voluptatibus!
    </div>
    <div>Aliquid cupiditate, deleniti deserunt dignissimos dolorem, ea error ex exercitationem fuga hic id impedit
        inventore ipsum iste itaque libero maiores molestiae, nesciunt nulla odio possimus praesentium quibusdam
        repellat sit velit.
    </div>
    <div>Asperiores, dolorum expedita explicabo facere, illo in, laboriosam molestiae nihil officia quaerat sequi ullam
        vero voluptatem! Culpa dolore est exercitationem fugiat fugit impedit laudantium maiores, nobis omnis porro,
        sequi tempore?
    </div>
    <div>Adipisci cum cumque dignissimos dolor, eius, facilis impedit molestias, necessitatibus quas quia quibusdam
        reiciendis sed temporibus vitae voluptates. Accusantium aut eveniet natus nostrum obcaecati optio porro possimus
        ratione sed voluptates?
    </div>
    <div>Architecto blanditiis, cum cupiditate eius est facere fugit harum hic impedit incidunt iure molestias nesciunt
        numquam officia officiis possimus quaerat ratione recusandae saepe vero! Architecto ducimus ex facere omnis
        quod.
    </div>
    <div>Adipisci amet atque corporis, dolore, dolorum ea eum laboriosam laudantium magnam mollitia, necessitatibus
        neque obcaecati optio quisquam sequi sint tenetur. Dolorum, expedita illo iusto necessitatibus numquam officia
        possimus quia similique.
    </div>
    <div>Eum, excepturi, exercitationem expedita impedit in ipsa ipsum iusto officiis optio quo ratione tempore
        temporibus veritatis? Aspernatur, assumenda dignissimos harum, incidunt nostrum quae quaerat, quidem reiciendis
        sequi sunt vero vitae.
    </div>
    <div>Aliquam assumenda dolorem eum ex, libero possimus provident reiciendis repellendus. Debitis et nam nisi
        quisquam unde vel, velit. Amet aperiam, cupiditate deserunt facere impedit inventore iusto officiis quae sit!
        Praesentium.
    </div>
    <div>Ab aperiam aut consequatur corporis, earum est eum exercitationem magnam magni, quis quo sint suscipit. Autem
        dicta enim minus! Ab blanditiis dignissimos doloribus in ipsa maxime provident, repellendus ut veniam!
    </div>
    <div>Facilis fuga ipsum iste nemo tempora. Animi atque non odit quibusdam repellat. Aut beatae commodi consequatur
        eligendi eos illo necessitatibus neque nobis officia provident rem sed suscipit, veritatis vero vitae.
    </div>
    <div>Adipisci aliquid aspernatur culpa cum distinctio eos excepturi maiores nemo non, perferendis quaerat sint.
        Aliquam at commodi, consectetur dicta dignissimos ducimus fugiat harum laborum, minus non perferendis ratione
        sapiente similique!
    </div>
    <div>Debitis, eligendi laudantium magnam maiores nulla officia quis velit? Accusantium adipisci delectus deserunt
        dolor, facere impedit, ipsam libero molestiae natus necessitatibus nemo, neque quia quidem repellendus saepe
        suscipit ullam veritatis?
    </div>
    <div>Accusamus consequatur consequuntur dolores doloribus illum laboriosam laborum, quis rerum voluptatem
        voluptatum? Ad amet aut autem consectetur deleniti earum eos eum placeat praesentium quisquam recusandae, rem
        rerum soluta tempora vel!
    </div>
    <div>Accusamus accusantium adipisci architecto assumenda blanditiis corporis deserunt dolor, est ex expedita id
        inventore iure libero magni minus modi nemo optio possimus repellat suscipit vel voluptas voluptate voluptatem.
        Id, magnam?
    </div>
    <div>Atque corporis deleniti dolore eos labore non quibusdam quis tenetur unde vero? Ab animi, architecto asperiores
        consequuntur corporis culpa esse exercitationem explicabo itaque iusto obcaecati odit repudiandae sint tempore
        unde!
    </div>
    <div>Beatae cum dicta ipsum necessitatibus pariatur praesentium sint soluta vitae. Adipisci aliquid at consectetur
        ea eos est eveniet, hic inventore iusto molestiae necessitatibus nostrum provident quidem quod recusandae soluta
        totam?
    </div>
    <div>Consequuntur culpa deserunt doloremque earum eius expedita fuga libero magnam officiis optio. Dignissimos enim
        est laboriosam, magnam minima perspiciatis voluptates. Blanditiis cupiditate dignissimos excepturi incidunt modi
        molestiae saepe vel voluptas?
    </div>
    <div>Animi eveniet ex ipsum iste nesciunt officia optio quam ratione repellat ut, velit voluptas. Aperiam asperiores
        distinctio harum suscipit? Amet harum molestiae optio quasi quos rem sapiente? Adipisci eveniet, ut?
    </div>
    <div>At, consectetur consequuntur delectus, deleniti dicta ea earum est expedita illo in inventore itaque iusto
        minima minus necessitatibus nisi nobis numquam, pariatur placeat quia reprehenderit rerum sit suscipit unde
        vitae.
    </div>
    <div>Cupiditate odio, repellendus. Aliquid dolorum esse nobis saepe vitae. Architecto atque harum itaque laborum
        voluptatem! Accusamus adipisci, amet cum dolores earum, error et expedita explicabo incidunt ipsa pariatur sunt
        voluptates.
    </div>
</div>

</body>
</html>